<template>
	<view class="goods_info" >
		<view class="goods_swiper">
			<u-swiper
				height="700rpx"
				@change="(e) => (currentNum = e.current)"
				:list="goodsInfo.image"
				radius="0"
				:autoplay="false"
			>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">
						{{ currentNum + 1 }}/{{
							goodsInfo['image'] && goodsInfo['image'].length
						}}
					</text>
				</view>
			</u-swiper>
		</view>
		<view class="goods">
			<view class="info_price">
				<view class="goods_price">
					<view class="price">￥{{ goodsInfo.price }}</view>
					<!-- <view class="vip">
						<view class="vip_price">￥39.00</view>
						<view class="vip_tag">会员价</view>
					</view> -->
					<!-- <view class="original_price">￥9999.00</view> -->
				</view>
				<view class="share">
					<u-icon
						@tap="shareShow = true"
						name="share-square"
						size="46rpx"
					></u-icon>
				</view>
			</view>
			<view class="goods_title">{{ goodsInfo.title }}</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section" v-if="goodsInfo.review_count != '0'">
			<view class="e-header">
				<view class="tit">
					<text >评价</text>
					<text>({{goodsInfo.review_count}})</text>
				</view>
				<view @click="allreview(goodsInfo.id)">
					查看全部
				</view>
			</view> 
			<view class="eva-box">
				<view class="eva-section">
					<view class="eva-top">
						<text class="name">用户***</text>
						<text class="time">{{goodsInfo.reviews[0].reviewed_at}}</text>
					</view>
					<view class="eva-bottom">
						<view>
							<l-starRate v-model="goodsInfo.reviews[0].rating" disabled="false"></l-starRate>
						</view>
						<text class="con">{{goodsInfo.reviews[0].review}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="goods_details">
			<view class="info">商品详情</view>
			<u-parse :content="goodsInfo.description"></u-parse>
		</view>

		<view class="info_bottom">
			<view class="bottom_left">
				<view class="b-l-item" @click="goToIndex">
					<view class="b-l-icon">
						<u-icon name="home" size="44rpx"></u-icon>
					</view>
					<view class="">首页</view>
				</view>
				<view class="b-l-item" @click="goToShopCar">
					<view class="b-l-icon">
						<u-icon name="shopping-cart" size="56rpx"></u-icon>
						<u-badge
							type="primary"
							max="99" 
							:value="shopCartNum"
							absolute
							:offset="[-2, -5]"
						></u-badge>
					</view>
					<view class="">购物车</view>
				</view>
			</view>
			<!-- //右边二个 -->
			<view class="bottom_right">
				<view class="right_orange" @tap="openSpecs('add')">
					加入购物车
				</view>
				<view class="green_red" @tap="openSpecs('buy')">立即购买</view>
			</view>
		</view>
		<u-overlay :show="shareImg" @click="shareImg = false">
			<view class="warp">
				<view class="warp_content">
					<u-image
						width="550rpx"
						height="950rpx"
						mode="aspectFit"
						src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
					></u-image>
				</view>
			</view>
		</u-overlay>
		<!-- 分享 -->
		<u-popup
			:show="shareShow"
			:round="5"
			@close="shareShow = false"
			:safeAreaInsetBottom="false"
		>
			<view class="share_content">
				<view class="item">
					<image src="../../static/image/pengyou.png" mode=""></image>
					<text>分享给朋友</text>
					<button class="share-btn" open-type="share"></button>
				</view>
				<!-- @tap="openShareImg" -->
				<!-- <view class="item">
					<image
						@click="generatePoster"
						src="../../static/image/haibao.png"
						mode=""
					></image>
					<text>生成分享海报</text>
				</view> -->
			</view>
			<view class="close_share" @tap="shareShow = false">取消分享</view>
		</u-popup>
		<!-- 查看评论 -->
		<u-popup
			:show="reviewShow"
			:round="5"
			@close="reviewShow = false"
			:safeAreaInsetBottom="false"
		>
			<view class="review_content">
				<u-list>
					<u-list-item v-for="(item,index) in goodsInfo.reviews" :key="index" class="review_content_at" style="width: 85vw;margin: 15rpx auto;background: #fff;padding: 20rpx;border-radius: 20rpx;">
						<view >
							<view class="eva-top" style="display:flex;justify-content: space-between;">
								<text class="name" style="font-size: 32rpx;">用户******</text>
								<view>
									<l-starRate v-model="item.rating" disabled="false"></l-starRate>
								</view>
								<!-- <text class="time" style="font-size: 26rpx;"></text> -->
							</view>
							<view class="eva-bottom" style="margin-top: 20rpx;">
								
								<text class="con">{{item.review}}</text>
								<!-- <view class="bot">
									<text class="attr">购买类型：XL 红色</text>
									<text class="time">2019-04-01 19:21</text>
								</view> -->
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</u-popup>
		<!-- 保存海报 -->
		<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'" @click="posterInfo.status = false">
			<canvas class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
			<view class="canvas-tip">长按可保存海报</view>
		</view>
		<!-- 加购/下单 -->
		<u-popup :show="show" @close="show = false" closeable>
			<view class="product">
				<view class="top">
					<view class="top_img">
						<u-image
							height="150rpx"
							width="150rpx"
							:src="goodsInfo.image[0]"
						></u-image>
					</view>
					<view class="top_info">
						<view class="price">￥{{skusInfo.price}}</view>
						<view class="inventory">库存{{skusInfo.stock}}件</view>
					</view>
				</view>
				<view style="margin: 20rpx 0">
					<u-line></u-line>
				</view>
				<view class="buy_num">
					<view class="buy_num_item">
						<text>购买数量</text>
						<!-- <text class="limit">(限购5件)</text> -->
					</view>
					<view>
						<u-number-box
							button-size="28"
							v-model="value"
							:min="1"
							:max="9999"
						></u-number-box>
					</view>
				</view>
				<view class="specification">
					<view class="">
						<text>商品规格</text>
						<!-- <text class="limit">(限购5件)</text> -->
					</view>
					<view class="specification_items">
						<view @click="activespecl(item)" class="specification_item" v-for="(item,index) in goodsInfo.skus" :key="index" :class="{'speclactive' : speclactive == item.id}">
							{{item.title}}
						</view>
					</view>
				</view>
				
				<u-button
					type="primary"
					shape="circle"
					text="立即购买"
					v-if="isBuy === 'buy'"
					@click="toPayOrder"
				></u-button>
				<u-button 
					type="primary"
					shape="circle"
					text="加入购物车"
					@click="addShopcart"
					v-else
				></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { productsInfo } from '@/api/base.js';
import { addcart , cartList } from '@/api/shopcart'
import { getUserInfo } from '@/api/user.js'
export default {
	data() {
		return {
			goodsInfo: {},
			isBuy: 'add',
			value: 1,
			show: false,
			shareShow: false,
			shareImg: false,
			list1: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png', 
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			],
			currentNum: 0,
			shopCartNum:0,
			// 用来控制canvas遮罩层的显示与隐藏
			posterInfo: {
				status: false,
			},
			userInfo:{},
			reviewShow:false,
			isLogin:false,
			speclactive:0,
			skusInfo:{}
		};
	},
	 onShareAppMessage() {
		return {
		  title: this.goodsInfo.title,
		  path: '/mallPage/goodsInfo/goodsInfo?id=' + this.goodsInfo.id,
		  imageUrl: this.goodsInfo.image[0]  // 分享显示的图片
		};
	  },
	  onShareTimeline() {
	    return {
	      title: '掌讯达商城',
	      // query: 'key=value' // 可选 参数
	    }
	  },
	onLoad(opt) {
		this.getProductsInfo(opt.id);
		
	},
	onShow(){
		if(uni.getStorageSync('userInfo')){
			this.isLogin = true
		}else{
			this.isLogin = false
		}
		cartList().then(res => {
		    if (res.status == 200) {
				this.shopCartNum = res.data.length
		    }
		}) 
		this.userInfo = uni.getStorageSync('userInfo')
	},
	methods: {
		handleAvatarTap(){
			
		},
		getProductsInfo(params) {
			productsInfo(params).then((res) => {
				this.goodsInfo = res.data;
				uni.setNavigationBarTitle({
					title: this.goodsInfo.title
				});
				this.speclactive = this.goodsInfo.skus[0].id
				this.skusInfo = this.goodsInfo.skus[0]
				this.goodsInfo.image.forEach((item, index) => {
				    this.goodsInfo.image[index] = 'https://images.weserv.nl/?url=' + item;
				});
			});
		},
		// 选规格
		activespecl(val){
			this.speclactive = val.id
			this.skusInfo = val
		},
		toPayOrder() {
			// const list = []
			// this.goodsInfo.num = this.value
			// list.push(this.goodsInfo)
			if(this.isLogin == true){
				uni.navigateTo({
					url: '/orderPage/awaitPayOrder/awaitPayOrder?type=product&id=' + this.goodsInfo.id + '&num=' + this.value + '&skuId=' +  this.skusInfo.id
				});
			}else{
				this.loginModal()
			}
			
		},
		// 加入购物车
		addShopcart(){
			if(this.isLogin == true){
				addcart({
					sku_id:this.skusInfo.id,
					amount:this.value
				}).then(res => {
					uni.showToast({
						title:res.message
					})
				})
			}else{
				this.loginModal()
			}
			
		},
		// 查看全部评论
		allreview(id){
			this.reviewShow = true
		},
		goToShopCar() {
			uni.navigateTo({
				url:'/mallPage/shopCar/shopCar'
			})
		},
		openSpecs(type) {
			this.isBuy = type;
			this.show = true;
		},

		goToIndex() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		},
		openShareImg() {
			this.shareShow = false;
			this.shareImg = true;
		},
		generatePoster() {
			this.shareShow = false;
			// 这里是创建 canvas 绘图上下文
			let context = uni.createCanvasContext('myCanvas');
			
			// 这里可以根据自己的需求显示加载动画
			uni.showToast({
				title: '正在生成海报，请稍后',
				icon: 'none',
				duration: 3000
			});
			// 小程序码图片，下面可以放一个请求，来保存小程序码。然后赋值到qrImg这个变量上面
			let qrImg = 'http://192.168.1.13:8080/mallPage/goodsInfo/goodsInfo?id=' + this.goodsInfo.id;
			
			// 给整个canvas填充白色背景（这个如果不加上的话，在APP端生成的海报没有白色背景）
			context.setFillStyle('#ffffff');
			context.fillRect(0, 0, 500, 900);
			context.draw();
			// 绘制用户昵称
			context.setFontSize(14);
			context.setFillStyle('#000000');
			// 这里根据自己的项目填写用户昵称的字段
			context.fillText(this.userInfo.name, 100, 48);
			context.setFontSize(12);
			context.setFillStyle('#999999');
			context.fillText('的分享', 100, 68);
			// 绘制价格
			context.setFontSize(18);
			context.setFillStyle('red');
			context.fillText(this.goodsInfo.price, 20, 366);
			// 绘制商品名称，这里是调用一个方法，按字符串长度进行分割换行。【可以做一个优化】
			this.drawText(this.goodsInfo.title, 20, 379, context);
			// 绘制头像
			uni.downloadFile({
				// url: this.userInfo.avatar,
				// url: 'https://cdn.learnku.com/uploads/images/201806/01/5320/2JMRaFwRpo.jpg',
				// success: function(res) {
				//     context.save();
				//     // 这个就是绘制圆形头像
		  //           context.beginPath();
				// 	context.arc(50, 50, 30, 0, 2 * Math.PI)
		  //           context.clip();
				// 	context.drawImage(res.tempFilePath, 20, 20, 60, 60);
				// 	context.restore();
				// 	context.draw(true);
				// }
				url: 'https://images.weserv.nl/?url=https://cdn.learnku.com/uploads/images/201806/01/5320/2JMRaFwRpo.jpg',
				    success: function(res) {
				        if (res.statusCode == 200) {
				            const tempFilePath = res.tempFilePath;
				
				            // 进行绘制操作
				            context.save();
				            context.beginPath();
				            context.arc(50, 50, 30, 0, 2 * Math.PI);
				            context.clip();
				            context.drawImage(tempFilePath, 20, 20, 60, 60);
				            context.restore();
				            context.draw(true);
				        } else {
				            console.error('Download image failed with status code:', res.statusCode);
				        }
				    },
				    fail: function(error) {
				        console.error('Download image failed:', error);
				    }
			});
			// 绘制商品详情
			uni.downloadFile({
				// this.goodsInfo.image[0]
				url: 'https://cdn.learnku.com/uploads/images/201806/01/5320/2JMRaFwRpo.jpg',
				success: function(res) {
					context.drawImage(res.tempFilePath, 15, 92, 245, 245);
					context.draw(true);
				}
			});
			// 绘制小程序码
			uni.downloadFile({
				// 这个qrImg就是上面获取的小程序码
				// url: qrImg,
				url: 'https://cdn.learnku.com/uploads/images/201806/01/5320/2JMRaFwRpo.jpg',
				success: function(res) {
					context.drawImage(res.tempFilePath, 165, 360, 100, 100);
					context.draw(true);
				}
			});
			// 绘制完成，让canvas显示【这里看自己项目，是否有loading动画】
			this.posterInfo.status = true;
		},
		// 商品名称文字换行
		drawText(context, x, y, canvas) {
			let strArr = [];
			let n = 11;
			for (let i = 0, l = context.length; i < l / n; i++) {
				let a = context.slice(n * i, n * (i + 1));
				strArr.push(a);
			}
			strArr.forEach((item, index) => {
				// 限制只能显示4行文字
				if (index > 3) {
					return;
				}
				y += 20;
				canvas.setFontSize(12);
				canvas.setFillStyle('#333333');
				canvas.fillText(item, x, y);
			});
		},
		// 长按保存生成的海报
		saveSharePic() {
			uni.showModal({
				title: '提示',
				content: '确定要保存分享海报吗？',
				success: function(res) {
					if (res.confirm) {
						// canvas生成图片
						uni.canvasToTempFilePath({
							// 这里修改保存的图片格式
							fileType: 'jpg',
							canvasId: 'myCanvas',
							quality: 1,
							success: function(res) {
								// 保存带哦本地
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存海报成功',
											icon: 'none',
											duration: 3000
										});
									},
									fail: function() {
										uni.showToast({
											title: '保存海报失败',
											icon: 'none',
											duration: 3000
										});
									}
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.product {
	padding: 30rpx;
	.top {
		display: flex;
		.top_info {
			margin-left: 30rpx;
			.price {
				color: #1786f8;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.inventory {
				font-size: 26rpx;
				color: #77818e;
			}
		}
	}
	.buy_num {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		// line-height: 40rpx;
		// align-items: center;
		// min-height: 300rpx;
		.buy_num_item {
			height: 56rpx;
			line-height: 56rpx;
			.limit {
				color: #1786f8;
			}
		}
	}
	.specification{
		margin-top: 30rpx;
		min-height: 300rpx;
		font-size: 28rpx;
		.specification_items{
			 // display: flex;
			 // justify-content: space-between;
			 .specification_item{
				 display: inline-block;
				 padding: 10rpx 15rpx;
				 margin: 10rpx;
				 border-radius: 20rpx;
				 border: 1rpx solid #838383;
				 font-size: 24rpx;
			 }
			 .speclactive{
				 background-color: #1786f8;
				 color: #fff;
			 }
		}
	}

}
/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20rpx 30rpx;
		background: #fff;
		margin-top: 16rpx;
		.e-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			font-size: 28rpx;
			color: #282828;;
			.tit{
				font-size: 28rpxrpx;
				color: #282828;
				margin-right: 4rpx;
			}
			.tip{
				flex: 1;
				text-align: right;
			}
			.icon-you{
				margin-left: 10rpx;
			}
		}
		.eva-box{
			.eva-top{
				display: flex;
				justify-content: space-between;
				.name{
					font-size: 30rpx;
					// padding: 10rpx 20rpx;
				}
				.time{
					font-size: 28rpx;
					color: #9a9a9a;
				}
			}
			.eva-bottom{
				margin-top: 15rpx;
				.con{
					margin-top: 15rpx;
				}
			}
		}
	}
.warp {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.review_content{
	width: 95% !important;
	height: 60vh;
	background: #e7e7e7;
	padding: 50rpx 25rpx;
	padding-bottom: 90rpx;
	overflow: auto;
	.u-list-item{
		width: 80vw !important;
		width: 500rpx;
		margin: 15rpx auto;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}
}
.share_content {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 60rpx 0 50rpx 0;

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		position: relative;
		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
		}
		.share-btn {
			padding: 0;
			width: 100rpx;
			height: 100rpx;
			opacity: 0;
			position: absolute;
		}
	}
}
.close_share {
	padding: 20rpx;
	text-align: center;
	border-top: 1px solid #eee;
}
.goods_details {
	margin-top: 20rpx;
	background-color: #ffffff;
	text-align: center;
	font-size: 36rpx;
	padding-bottom:130rpx;
	.info {
		padding: 30rpx 0;
	}
	// height: 100vh;
}
.goods {
	background-color: #ffffff;

	.goods_title {
		padding: 0 30rpx 30rpx;
		font-weight: bold;
	}
	.info_price {
		padding: 30rpx 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		.goods_price {
			display: flex;
			font-weight: bold;
			.price {
				color: #1786f8;
				font-size: 38rpx;
			}
			.vip {
				display: flex;
				margin-left: 10rpx;
				.vip_price {
					font-size: 26rpx;
				}
				.vip_tag {
					background-color: #000000;
					border-radius: 6rpx;
					font-size: 15rpx;
					padding: 0 8rpx;
					height: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					margin-top: 6rpx;
					margin-left: 10rpx;
					color: #ddda80;
					position: relative;
					left: -6rpx;
					z-index: 1;
					&::before {
						content: '';
						display: block;
						position: absolute;
						left: -6rpx;
						z-index: 0;
						border-top: 8rpx solid #000000;
						border-bottom: 8rpx solid transparent;
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid #000000;
					}
				}
			}
			.original_price {
				font-weight: normal;
				color: #77818e;
				text-decoration: line-through;
				font-size: 26rpx;
				margin-top: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.info_bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 100rpx;
	padding: 10rpx 30rpx;
	position: fixed;
	z-index: 99;
	bottom: 0;
	background-color: #ffffff;
	box-sizing: border-box;

	& .bottom_left {
		display: flex;
		text-align: center;
		justify-content: space-between;
		width: 160rpx;
		.b-l-item {
			position: relative;
			width: 60rpx;
			font-size: 20rpx;
			padding-top: 10rpx;
			margin-right: 10rpx;
			font-weight: 400;
			color: #77818e;
			&:last-child {
				margin-right: 0;
			}
			.b-l-btn {
				position: absolute;
				width: 60rpx;
				height: 70rpx;
				opacity: 0;
			}
			.b-l-icon {
				width: 60rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom_right {
		display: flex;
		.right_orange {
			width: 240rpx;
			box-sizing: border-box;
			border-radius: 50rpx 0 0 50rpx;
			font-size: 28rpx;
			color: #ffffff;
			text-align: center;
			padding-top: 20rpx;
			background-color: #ff851f;
		}
		.green_red {
			width: 240rpx;
			color: #ffffff;
			font-size: 28rpx;
			padding-top: 20rpx;
			border-radius: 0 50rpx 50rpx 0;
			box-sizing: border-box;
			text-align: center;
			background-color: #1786f8;
		}
	}
}

.indicator-num {
	position: relative;
	right: -300rpx;
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
.my-canvas-box {
	width: 750rpx;
	height: 100%;
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 99;

	&.hide {
		display: none;
	}

	&.show {
		display: block;
	}
	.canvas-tip {
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 30rpx;
		text-align: center;
	}
	/* #ifdef MP-WEIXIN */
	.my-canvas {
		width: 550rpx;
		height: 950rpx;
		background-color: #ffffff;
		margin: 200rpx auto;
	}
	/* #endif */

	/* #ifdef APP-PLUS || H5 */
	.my-canvas {
		width: 550rpx;
		height: 950rpx;
		background-color: #ffffff;
		margin-top: 220rpx auto;
	}
	/* #endif */
}
</style>
